<template>
  <el-main>
    <!-- 周榜，月榜，总榜 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="周榜" name="_id" :disabled="is_id">
        <contentStore :go="headerHtml[activeName]" lazy="true"></contentStore>
      </el-tab-pane>

      <el-tab-pane label="月榜" name="monthRank" :disabled="ismonthRank">
        <contentStore :go="headerHtml[activeName]" lazy="true"></contentStore>
      </el-tab-pane>

      <el-tab-pane label="总榜" name="totalRank" :disabled="istotalRank">
        <contentStore :go="headerHtml[activeName]" lazy="true"></contentStore>
      </el-tab-pane>
      
    </el-tabs>
  </el-main>
</template>

<script>
import { sortBook } from "@/api/cjs/sort";
import { mapState } from "vuex";
import contentStore from "./content.vue";

export default {
  data() {
    return {
      headerHtml: {},
      activeName: "_id",
      is_id: "",
      ismonthRank: "",
      istotalRank: ""
    };
  },
  created() {
    setTimeout(() => {
      this.headerHtml = this.sortHtml;
      this.is_id = this.headerHtml._id ? false : true;
      this.ismonthRank = this.headerHtml.monthRank ? false : true;
      this.istotalRank = this.headerHtml.totalRank ? false : true;
    }, 20);
  },
  computed: {
    ...mapState(["sortHtml"])
  },
  methods: {
    handleClick(tab, event) {
    }
  },
  components: {
    contentStore
  },
  watch: {
    sortHtml(newVal) {
      setTimeout(() => {
        this.headerHtml = this.sortHtml;

        this.is_id = this.headerHtml._id ? false : true;
        this.ismonthRank = this.headerHtml.monthRank ? false : true;
        this.istotalRank = this.headerHtml.totalRank ? false : true;
        
      }, 20);
    }
  }
};
</script>
